<script setup lang="ts">
import { ref } from 'vue';
import Taro, { hideLoading, showLoading, navigateBack } from '@tarojs/taro';
import { useAuthStore } from '@/store';

definePageConfig({
  navigationBarTitleText: '选择城市'
  // enablePullDownRefresh: true //下拉刷新
});

const latitude = ref(-999);
const longitude = ref(-999);
const currentStep = ref('province'); // 'province' 或 'city'
const selectedProvince = ref('');

const { setCurrentCity } = useAuthStore();

getLocation();
getData();

// 获取数据
async function getData() {
  showLoading({ title: '正在请求数据...' });
  hideLoading();
}

// 获取用户当前位置
function getLocation() {
  try {
    Taro.getLocation({
      type: 'wgs84',
      // type: 'gcj02',
      needFullAccuracy: true,
      success(res) {
        latitude.value = res.latitude;
        longitude.value = res.longitude;
      }
    });
  } catch (err) {
    Taro.showModal({
      title: '提示',
      content: '获取位置服务信息失败!',
      showCancel: false,
      success(res) {
        if (res.confirm) {
          // 用户点击确定
        } else if (res.cancel) {
          // 用户点击取消
        }
      }
    });
  }
}

// 选择省份
function selectProvince(province: string) {
  selectedProvince.value = province;
  currentStep.value = 'city';
}

// 选择城市
function selectCity(city: string) {
  setCurrentCity(city);

  const pages = Taro.getCurrentPages();
  const current = pages[pages.length - 1]; /* 从堆栈中获取当前界面的属性 */
  const eventChannel = current.getOpenerEventChannel();
  eventChannel.emit('switchCity', {
    data: { currentCity: city }
  });

  setTimeout(() => {
    navigateBack();
  }, 1200);
}

// 返回省份选择
function backToProvince() {
  currentStep.value = 'province';
  selectedProvince.value = '';
}

// 省份数据
const provinceList = [
  {
    name: '广西壮族自治区',
    code: 'guangxi'
  },
  {
    name: '广东省',
    code: 'guangdong'
  }
];

// 城市数据
const cityData: Record<string, Array<{ title: string; list: Array<{ name: string; id: number }> }>> = {
  guangxi: [
    {
      title: 'B',
      list: [
        {
          name: '北海市',
          id: 1
        },
        {
          name: '百色市',
          id: 2
        }
      ]
    },
    {
      title: 'C',
      list: [
        {
          name: '崇左市',
          id: 3
        }
      ]
    },
    {
      title: 'F',
      list: [
        {
          name: '防城港市',
          id: 4
        }
      ]
    },
    {
      title: 'G',
      list: [
        {
          name: '贵港市',
          id: 5
        },
        {
          name: '桂林市',
          id: 6
        }
      ]
    },
    {
      title: 'H',
      list: [
        {
          name: '河池市',
          id: 7
        },
        {
          name: '贺州市',
          id: 8
        }
      ]
    },
    {
      title: 'L',
      list: [
        {
          name: '来宾市',
          id: 9
        },
        {
          name: '柳州市',
          id: 10
        }
      ]
    },
    {
      title: 'N',
      list: [
        {
          name: '南宁市',
          id: 11
        }
      ]
    },
    {
      title: 'Q',
      list: [
        {
          name: '钦州市',
          id: 12
        }
      ]
    },
    {
      title: 'W',
      list: [
        {
          name: '梧州市',
          id: 13
        }
      ]
    },
    {
      title: 'Y',
      list: [
        {
          name: '玉林市',
          id: 14
        }
      ]
    }
  ],
  guangdong: [
    {
      title: 'C',
      list: [
        {
          name: '潮州市',
          id: 15
        }
      ]
    },
    {
      title: 'D',
      list: [
        {
          name: '东莞市',
          id: 16
        }
      ]
    },
    {
      title: 'F',
      list: [
        {
          name: '佛山市',
          id: 17
        }
      ]
    },
    {
      title: 'G',
      list: [
        {
          name: '广州市',
          id: 18
        }
      ]
    },
    {
      title: 'H',
      list: [
        {
          name: '河源市',
          id: 19
        },
        {
          name: '惠州市',
          id: 20
        }
      ]
    },
    {
      title: 'J',
      list: [
        {
          name: '江门市',
          id: 21
        },
        {
          name: '揭阳市',
          id: 22
        }
      ]
    },
    {
      title: 'M',
      list: [
        {
          name: '茂名市',
          id: 23
        },
        {
          name: '梅州市',
          id: 24
        }
      ]
    },
    {
      title: 'Q',
      list: [
        {
          name: '清远市',
          id: 25
        }
      ]
    },
    {
      title: 'S',
      list: [
        {
          name: '汕头市',
          id: 26
        },
        {
          name: '汕尾市',
          id: 27
        },
        {
          name: '韶关市',
          id: 28
        },
        {
          name: '深圳市',
          id: 29
        }
      ]
    },
    {
      title: 'Y',
      list: [
        {
          name: '阳江市',
          id: 30
        },
        {
          name: '云浮市',
          id: 31
        }
      ]
    },
    {
      title: 'Z',
      list: [
        {
          name: '湛江市',
          id: 32
        },
        {
          name: '肇庆市',
          id: 33
        },
        {
          name: '珠海市',
          id: 34
        },
        {
          name: '中山市',
          id: 35
        }
      ]
    }
  ]
};
</script>

<template>
  <basic-layout>
    <!-- <custom-navbar title="选择城市" showLeft/> -->
    
    <!-- 省份选择页面 -->
    <view v-if="currentStep === 'province'" class="p-[20rpx]">
      <view class="text-[32rpx] font-bold mb-[20rpx]">请选择省份</view>
      <view class="space-y-[10rpx]">
        <view 
          v-for="province in provinceList" 
          :key="province.code"
          class="bg-white p-[20rpx] rounded-[10rpx] shadow-sm border border-gray-100"
          @click="selectProvince(province.code)"
        >
          <text class="text-[28rpx]">{{ province.name }}</text>
        </view>
      </view>
    </view>

    <!-- 城市选择页面 -->
    <view v-else-if="currentStep === 'city'" class="h-full">
      <view class="p-[20rpx] bg-gray-50 border-b border-gray-200">
        <view class="flex items-center">
          <view class="text-[24rpx] text-blue-500 mr-[10rpx]" @click="backToProvince">
            <text>← 返回</text>
          </view>
          <text class="text-[28rpx] font-medium">
            {{ selectedProvince === 'guangxi' ? '广西壮族自治区' : '广东省' }}
          </text>
        </view>
      </view>
      <nut-elevator 
        :index-list="cityData[selectedProvince]" 
        :height="'calc(100% - 80rpx)'" 
        @click-item="(key, item) => selectCity(item.name)"
      ></nut-elevator>
    </view>
  </basic-layout>
</template>
